<template>
	<uiwu-popup v-model="showM">
		<view class="uiwu-popup uiwu-flex-center" @tap.stop>
			<view class="uiwu-popup-box">
				<image class="tipsIcon" :src="iconSrc" mode="widthFix"></image>
				<view class="title" v-if="showTitle">{{uiwu.lang('温馨提示')}}</view>
				<view class="content">
					<slot name="content">提示内容</slot>
				</view>
				<view class="btn uiwu-flex-space">
					<text class="uiwu-flex-center" @tap="cancel"><slot name="close">{{uiwu.lang('取消')}}</slot></text>
					<text class="uiwu-flex-center" @tap="confirm"><slot name="confirm">{{uiwu.lang('确定')}}</slot></text>
				</view>
			</view>
		</view>
	</uiwu-popup>
</template>

<script lang="ts" setup>
	/**
	 * @event {Function()} confirm 确定回调 
	 */
	import { computed } from "vue";
	const props = defineProps({
		modelValue: Boolean,
		showTitle:{
			default:true,
			type:Boolean
		},
		iconSrc:{
			default:'/static/popuplingdang.png',
			type:String
		}
	})
	const emits = defineEmits(['confirm', 'cancel', 'update:modelValue'])
	const showM = computed(() => {
		return props.modelValue
	})
	const confirm = () => {
		emits('confirm')
		emits('update:modelValue', false);
	}
	const cancel = () => {
		emits('cancel')
		emits('update:modelValue', false);
	}
</script>

<style lang="scss" scoped>
	.uiwu-popup {
		width: 100%;
		height: 100%;
		
		&-box {
			width: 560rpx;
			height: auto;
			background: url('../../static/popupbutton.png') no-repeat 0 calc(100% + 4rpx) #fff;
			background-size: 100% auto;
			padding-top: 88rpx;
			position: relative;
			border-radius: 34rpx;
			border: 4rpx solid #14171C;
			box-sizing: border-box;
			padding-bottom: 232rpx;
			.tipsIcon{
				width: 120rpx;
				position: absolute;
				left: 0;
				right: 0;
				top: -60rpx;
				margin: 0 auto;
			}
			.title {
				font-size: 40rpx;
				font-weight: 500;
				color: #14171C;
				text-align: center;
				margin-bottom: 32rpx;
			}

			.content {
				padding: 0 107rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #444444;
			}

			.btn {
				padding: 0 40rpx;
				position: absolute;
				bottom: -44rpx;
				left: 0;
				right: 0;
				text {
					position: relative;
					width: 224rpx;
					height: 87rpx;
					&:nth-child(1) {
						font-size: 32rpx;
						font-weight: bold;
						color: #231815;
						background: url('../../static/popupclose.png') no-repeat 0 0;
						background-size: 100% 100%;
					}

					&:nth-child(2) {
						font-size: 32rpx;
						font-weight: bold;
						color: #FFFFFF;
						background: url('../../static/popupconfig.png') no-repeat 0 0;
						background-size: 100% 100%;
					}
				}
			}
		}
	}
</style>